<template>
    <div class="app-container background" style="padding: 0;">
        <div class="top-title-background">
            <img src="../../../assets/images/switch.png" alt="" style="width: 30px;height: 30px;margin: -10px 11px -15px;cursor: pointer;" @click="cardView = !cardView">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" class="query-form">
                <el-form-item prop="deptId" class="tree-select">
                    <treeselect v-model="queryParams.deptId" :options="deptOptions" placeholder="归属工厂"
                        style="width: 160px;" :show-count="true" />
                </el-form-item>
                <el-form-item label="" prop="name">
                    <el-input v-model="queryParams.name" placeholder="设备名称" clearable style="width: 160px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="" prop="deviceType">
                    <el-select v-model="queryParams.deviceType" placeholder="机组类型" style="width: 160px" clearable>
                        <el-option v-for="type in typeOptions" :key="type.id" :label="type.typeName" :value="type.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="oilCode">
                    <el-select v-model="queryParams.oilCode" placeholder="油品编号" style="width: 160px" clearable>
                        <el-option v-for="dict in dict.type.oil_code" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="onLine">
                    <el-select v-model="queryParams.onLine" placeholder="是否在线" style="width: 160px" clearable>
                        <el-option v-for="dict in dict.type.oil_yes_no" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <i class="el-icon-search" @click="handleQuery" style="color: #C9C9C9;cursor: pointer;"></i>
                    <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <el-row :gutter="25" style="padding:20px;margin: 0;" v-if="cardView">
            <el-col :span="8" v-for="(device, index) in deviceList" :key="device.id" style="margin-bottom: 20px;">
                <el-card class="device-card">
                    <div slot="header" style="padding: 0;height: 20px;">
                        <div class="circle">
                            <svg-icon v-if="!device.onLine" icon-class="alarm" class="alarm-icon" style="fill: grey;"></svg-icon>
                            <svg-icon v-else-if="device.alarmCount==0" icon-class="alarm" class="alarm-icon" style="fill: springgreen;"></svg-icon>
                            <svg-icon v-else icon-class="alarm" class="alarm-icon" style="fill: red;"></svg-icon>
                        </div>
                        <span style="letter-spacing: 2px;font-size: 16px;font-weight: normal;">{{ device.name }}</span>
                        <dict-tag style="display: inline;margin-left: 30px;font-size: 14px;" :options="dict.type.oil_code" :value="device.oilCode" />
                        <el-button size="samll" style="display: inline;float: right;font-size: 16px;padding: 0;margin-top: 5px;"
                            type="text" @click="goAnalysis(device)">查看</el-button>
                    </div>
                    <div style="font-size: 14px;display: flex;overflow-y: auto;height: 80%;">
                        <div class="img-container">
                            <img v-if="device.onLine" src="../../../assets/images/online.png"  class="online-img">
                            <img v-else src="../../../assets/images/offline.png" class="online-img">
                            <img :src="prefix + device.devicePic" style="width: 220px;height: 146px;"></img> 
                        </div>
                        
                        <div class="text-container">
                            <p>
                                <span style="font-weight: bold;">所属工厂：</span>
                                <span style="display: inline-block;line-height: 20px;width: 150px;vertical-align: middle;">
                                    {{device.deptName }}
                                </span>
                            </p>
                            <p><span style="font-weight: bold;">设备编号：</span>{{ device.code }}</p>
                            <p><span style="font-weight: bold;">设备型号：</span>{{ device.deviceTypeName }}</p>
                            <p><span style="font-weight: bold;">创建时间：</span>{{ device.createTime }}</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-table v-if="!cardView" :data="deviceList" >
          <el-table-column label="序号" align="center" prop="id" width="55" />
          <el-table-column label="设备名称" align="center" prop="name" />
          <el-table-column label="用户名称" align="center" prop="deptName" />
          <el-table-column label="是否在线" align="center" prop="onLine">
            <template slot-scope="scope">
                <div v-if="scope.row.onLine">
                   <img  src="../../../assets/images/online.png" style="width: 25px;height: 25px;vertical-align: top;" alt="">
                   <span style="color: aqua;">在线</span>
                </div>
                <div v-else>
                     <img src="../../../assets/images/offline.png" style="width: 25px;height: 25px;vertical-align: top;" alt="">
                     <span style="color: red;">离线</span>
                </div>
            </template>
          </el-table-column>
          <el-table-column label="设备状态" align="center" prop="state">
            <template slot-scope="scope">
                <div v-if="!scope.row.onLine">
                    <svg-icon  icon-class="alarm"  style="fill: grey;width: 19px;height: 19px;"></svg-icon>
                    <span style="color: grey;">网络异常</span>
                </div>
                <div v-else-if="scope.row.alarmCount==0">
                    <svg-icon  icon-class="alarm"  style="fill: springgreen;width: 19px;height: 19px;"></svg-icon>
                    <span style="color: springgreen;">正常</span>
                </div>
                <div v-else>
                    <svg-icon  icon-class="alarm"  style="fill: red;width: 19px;height: 19px;"></svg-icon>
                    <span style="color: red;">报警</span>
                </div>
            </template>
          </el-table-column>
          <el-table-column label="机组类型" align="center" prop="deviceTypeName">
        </el-table-column>
          <el-table-column label="设备编号" align="center" prop="code" />
          <el-table-column label="油品编号" align="center" prop="oilCode">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.oil_code" :value="scope.row.oilCode" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="100">
        </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="goAnalysis(scope.row)"
                v-hasPermi="['oil:device:list']">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script>
import { listDevice } from "@/api/oil/device";
import { deptTreeSelect } from "@/api/system/user";
import { listType } from "@/api/oil/type";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { svrapi } from "../../../utils/request";
export default {
    name: "DeviceCard",
    dicts: ['oil_device_type', 'oil_industry_type', 'oil_code', 'oil_yes_no'],
    components: { Treeselect },
    data() {
        return {
            deviceList: [],
            deptOptions: [],
            typeOptions: [],
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: null,
                industryType: null,
                deviceType: null,
                deptId: null,
                state: null,
                onLine: null,
            },
            prefix: '',
            routePath:"", //点击查看按钮进入的页面
            cardView:true
        }
    },
    created() {
        //菜单设置的路由参数存储在this.$route.query，前端代码直接传入的路径参数在this.$route.params
        const routePath = this.$route.query && this.$route.query.routePath;
        if(routePath){
            this.routePath = routePath;
        }
        this.getDeptTree();
        this.getTypes();
        this.getList();
        this.prefix = svrapi;   // 设置图片前缀
    },
    //设置页面缓存。当页面被激活时
    activated(){
        const routePath = this.$route.query && this.$route.query.routePath;
        if(routePath){
            this.routePath = routePath;
        }
    },
    methods: {
        getTypes() {
            listType({ pageSize: 5000 }).then(res => {
                this.typeOptions = res.rows;
            })
        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
        /** 查询设备管理列表 */
        getList() {
            listDevice(this.queryParams).then(response => {
                this.deviceList = response.rows;
                this.total = response.total;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        goAnalysis(device){
            const deviceCode = device.code;
            console.log(this.routePath + "/" + deviceCode)
            this.$router.push(this.routePath + "/" + deviceCode); //进入菜单设置的下一页面并传递deviceCode作为参数
        }
    }
}
</script>

<style>
.circle{
    display: inline-block;position: relative;top:-15px;left: -20px;width: 50px;height: 50px;border-radius: 50px;background-image: linear-gradient(to right,#13558B,#06223B);border: solid 1.5px #0079EE;
}
.alarm-icon{
    width: 30px !important;height: 30px !important;vertical-align: middle !important;position: relative;top: 6px;left: 8px;
}
.img-container{
    display: inline-block;background-color: #013054;border:solid 1px #0079EE;border-radius: 5px;width: 220px;height: 197px;padding-top: 25px;position: relative;
}
.online-img{
    width: 30px;height: 30px;position: absolute;top: 0;right: 0;
}
.text-container{
    display: inline-block;min-width: 220px;line-height: 35px;word-break: break-all;margin-left: 10px;overflow-x: hidden;
}
.query-form {
    margin-left: 20px;
    display: inline-block;
}

.query-form.el-form--inline .el-form-item {
    margin-right: 20px;
}

.device-card {
    height: 250px;
    overflow-y: auto;
    border: solid 1.5px #0079EE !important;
    border-radius: 7px;
    overflow: visible;
}

.device-card .el-card__header {
    padding: 5px;
    border: solid 1.5px #0079EE;
    border-radius: 5px;
    border-top: 0;
    border-right: 0;
}

.device-card .el-card__body {
    padding: 5px;
}

.tree-select .vue-treeselect__control {
    line-height: 24px;
    margin-top: 4.5px;
    border-radius: 4px;
    height: 24px;
}

.tree-select .vue-treeselect__placeholder,
.tree-select .vue-treeselect__single-value {
    line-height: 24px;
}

/* 修改滚动条宽度 */
.device-card::-webkit-scrollbar {
    width: 3px;
    /* 水平滚动条宽度 */
    height: 3px;
    /* 垂直滚动条宽度 */
}

/* 修改滚动条滑块样式 */
.device-card::-webkit-scrollbar-thumb {
    background-color: #01152D;
    /* 滚动条颜色 */
    border-radius: 0px;
    /* 滚动条圆角 */
}

/* 修改滚动条轨道样式 */
.device-card::-webkit-scrollbar-track {
    background-color: #ffffff;
    /* 轨道颜色 */
}
</style>